/**
 * @file select
 * @author liaoxuezhi@baidu.com
 *
 * https://github.com/JedWatson/react-select
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  PureComponent,
  PropTypes
} from 'react';
import {Enhance as FormItem} from '../form-item';
import * as cx from 'classnames';
import * as omit from 'lodash/omit';
import * as assign from 'object-assign';
import {filterOptions} from '../util'
// @require 'react-select/dist/react-select.css';
// jest 不能支持这种写法
// import 'react-select/dist/react-select.css';
import {render} from '../../renderer';

@FormItem({
  type: 'button-group',
  validateSchema: 'http://amis.baidu.com/schemas/form.json#/definitions/buttonGroup'
})
export default class BtnGroup extends PureComponent {
  static propTypes = {
    className: PropTypes.string,
    formMode: PropTypes.string,
    formHorizontal: PropTypes.object
  };

  static defaultProps = {
    value: '',
    placeholder: '请选择',
    btnClassName: 'btn-default',
    btnActiveClassName: 'btn-default active',
    clearable: false
  };

  constructor(props) {
    super(props);

    this.state = {
      options: props.options || []
    };

    this.changeValue = this.changeValue.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    const props = this.props;

    if (props.sourceFetching && !nextProps.sourceFetching && nextProps.sourceData) {
      const sourceData = nextProps.sourceData;
      this.setState({
        options: sourceData.options
      }, () => sourceData.hasOwnProperty('value') && this.props.setValue(sourceData.value));
    }

    if (props.options !== nextProps.options) {
      this.setState({
        options: nextProps.options
      });
    }
  }

  changeValue(newValue) {
    const {
      getValue,
      clearable
    } = this.props;

    if (clearable && getValue() === newValue) {
      newValue = '';
    }

    this.props.setValue(newValue);
  }

  renderInput(inputProps) {
    const {
      options,
      placeholder,
      btnClassName,
      btnActiveClassName,
      value,
      key,
      onChange,
      disabled,
      inputClassName
    } = inputProps;

    if (!options || !options.length) {
      return (<p className="text-muted">{placeholder}</p>);
    }

    return (
      <div className={cx('btn-group', inputClassName)} key={key}>
        {options.map((option, key) => (
          <label
            key={key}
            onClick={() => onChange(option.value)}
            className={cx('btn', value == option.value ? btnActiveClassName :  btnClassName, {
              disabled: disabled || option.disabled
            })}
          >
            {option.icon ? <i className={option.icon} /> : null}
            {option.label}
          </label>
        ))}
      </div>
    );
  }

  render() {
    const {
      name,
      placeholder,
      disabled,
      buttons,
      btnClassName,
      btnActiveClassName,
      inputClassName,
      $path
    } = this.props;

    const options = this.state.options;
    let value = this.props.getValue();

    if (buttons && buttons.length) {
      return (
        <div className={cx('btn-group', inputClassName)}>
          {buttons.map((button, key) => render(`${$path}/action`, button, assign(omit(this.props, ['type', 'name', 'placeholder', 'buttons', 'options', '$path']), {
            key
          })))}
        </div>
      );
    }

    const inputProps = {
      name, placeholder,
      options: options ? filterOptions(options) : [],
      value: value,
      onChange: this.changeValue,
      key: 'input',
      disabled,
      btnClassName,
      btnActiveClassName,
      inputClassName
    };

    return this.renderInput(inputProps);
  }
}
